<template>
	<view class="start-main">
		<iconMusic/> 
		<view class="start-title">
			{{ startPage.lineOne.textOne }}
			<text style="color:rgba(255, 210, 64, 1)">{{ data.name }}</text>
			{{ startPage.lineOne.textTwo}}
		</view>
		<view class="start-title2">
			{{ startPage.lineTwo.textOne }}
			<text style="color:rgba(255, 210, 64, 1)">{{ data.day }}</text>
			{{ startPage.lineTwo.textTwo }}
		</view>
		<view class="ufo"></view>
		<view class="game-handle"></view>	
		<view class="time-machine"></view>
		<view class="backetball"></view>
		<view class="book"></view>
		<view class="spring-small"></view>
		<view class="spring-big"></view>
		<view class="btn">
			<image @click="goto" src="http://rjinbysql.hn-bkt.clouddn.com/static/images/my-button.png"></image>
			<view class="btn-info-box">
				<view ><image class="left" src="http://rjinbysql.hn-bkt.clouddn.com/static/images/矩形 4@2x.png"></image></view>
				<view class="">{{ startPage.lineThree}}</view>
				<view class=""><image class="left" src="http://rjinbysql.hn-bkt.clouddn.com/static/images/矩形 4@2x (1).png"></image></view>
			</view>
		</view>
	</view>
</template>

<script>
	import student from '/stateData/student.js'
	const { startPage } = student
	import { getInfo,getTeaInfo } from '/common/api.js' 
	export default {
		data(){
			return {
				startPage:student.startPage,
				data:{
					name:'张依依',
					day:894,
				}
			}
		},
	    async onLoad() {
			console.log('请求开始');
			// let res =await getInfo(199000241)
			// console.log('res1231321313:',res);
			
			// uni.request({
			// 	url:'http://120.48.72.219:83/student/studentShow?studentId=199000241',
			// 	success:(res)=>{
			// 		console.log('直接请求：',res);
			// 	}
			// })
			
			
			uni.request({
				url:'http://43.142.117.55:8051/teacherTermReport/startupPage?teacherId=11',
				success:(res)=>{
					console.log("教师端直接请求：",res);
				}
			})
			
			let tea = await getTeaInfo(11)
			console.log('教师：',tea);
		},
		methods:{
			goto(){
				uni.redirectTo({
					url:'/pages/student/showPage/showPage'
				})
			}
		}
	}
	
</script> 

<style lang="scss" scoped>
	.start-main{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		@include background('http://rjinbysql.hn-bkt.clouddn.com/static/images/stbg-start.png');
	}
	.start-title{
		font-size: 56rpx;
		font-weight: 400;
		letter-spacing: 4rpx;
		color: white;
		margin-top: 15%;
		text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
		font-family: '站酷快乐体';
	}
	.start-title2{
		font-size: 40rpx;
		font-weight: 400;
		letter-spacing: 4rpx;
		color: white;
		text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.8);
		margin-top: 10%;
	}
	.ufo{
		width: 64rpx;
		height: 64rpx;
		@include pic('http://rjinbysql.hn-bkt.clouddn.com/static/images/ufo.png');
	}
	.game-handle{
		width: 84rpx;
		height: 84rpx;
		@include pic('http://rjinbysql.hn-bkt.clouddn.com/static/images/game-handle.png');
		position: absolute;
		top: 30%;
		right: 20%;
	}
	.time-machine{
		width: 800rpx;
		height:800rpx;
		@include pic('http://rjinbysql.hn-bkt.clouddn.com/static/images/time-machine.png');
		position: absolute;
		top: 20%;
	}
	.backetball{
		width: 196rpx;
		height: 160rpx;
		@include pic('http://rjinbysql.hn-bkt.clouddn.com/static/images/basketball.png');
		position: absolute;
		bottom: 25%;
		left: 10%;
		animation: backetball-an 2s ease alternate infinite;
	}
	@keyframes backetball-an{
		0%{
			bottom: 30%;
		}
		100%{
			bottom: 22%;
		}
	}
	.book{
		width: 218rpx;
		height: 218rpx;
		@include pic('http://rjinbysql.hn-bkt.clouddn.com/static/images/book.png');
		position: absolute;
		bottom: 20%;
		right: 20%;
	}
	.spring-small{
		width: 84rpx;
		height: 84rpx;
		@include pic('http://rjinbysql.hn-bkt.clouddn.com/static/images/spring-small.png');
		position: absolute;
		top: 40%;
		left: 55%;
	
	}
	.spring-big{
		width: 172rpx;
		height: 172rpx;
		@include pic('http://rjinbysql.hn-bkt.clouddn.com/static/images/spring-big.png');
		position: absolute;
		top: 65%;
		left: 30%;
	}
	.btn{
		width: 100%;
		height: 250rpx;
		position: absolute;
		bottom: 2%;
		display: flex;
		flex-direction: column;
		align-items: center;
		image{
			width: 396rpx;
			height: 200rpx;
		}
	}
	.btn-info-box{
		width: 100%;
		height: 50rpx;
		display: flex;
		justify-content: center;
		font-size: 24rpx;
		color: white;
		letter-spacing: 4rpx;
		.left{
			width: 50rpx;
			height: 2rpx;
		}
	}
</style>
